<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{browserTitle}}</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet prefetch" href='https://use.fontawesome.com/releases/v5.0.10/css/all.css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github-gist.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>


<style>
.theme-dark {
    --background-color: #222;
    --bg-card-deck: #444444;
    --text-color: #ccd2d8;
    --tab-border: solid 1px #444;
    --success: #3c9372;
    --failure: #c24a3f;
    --warning: #d28c23;
    --info: #4083b6;
    --badge-outline: #3c9372;
    --badge-bg: #cdd3db;
    --badge-text: #ccd2d9;
    --failure-row: #c24a3f;
    --warning-row: #d28c23;
    --card-bg: #444;
    --card-footer: #4f5758;
    --form-input: #ececb5;
    --hov-text: #d2dae5;
    --h4-text: #ccd1d9;
}
.theme-light {
    --tab-border: solid 1px #fff;
    --text-color: #000000;
    --success: #42a745;
    --failure: #dc3544;
    --warning: #f4c10b;
    --info: #49a1b8;
    --badge-outline: #040411;
    --badge-bg: #f8f9fa;
    --badge-text: #fff;
    --failure-row: #f5c6cb;
    --warning-row: #ffeeba;
    --card-bg: #f7f7f7;
    --hov-text: #fff;
    --h4-text: #ffffff;
}
body {
  padding-top:30px;
  background-color: var(--background-color);
  color: var(--text-color);
}
#execution-data {
  padding: 10px;
  border: var(--tab-border);
  border-top: none;
}
.nav-tabs {
  padding-top: 10px;
  height: 105px;
  overflow-y: auto;
}
.card-header {
    background-color: var(--card-bg)!important;
}
.card-body {
    background-color: var(--card-bg)!important;
}
.card-footer {
    padding: .75rem 1.25rem;
    background-color: var(--card-footer);
}
.card-deck {
    background-color: var(--bg-card-deck)!important;
}
.form-control, .form-control:focus {
    background: var(--form-input);
}
.custom-tab {
  padding: 10px 15px;
  margin-right: 0px;
  height: 46px;
  width: 59px;
  text-align: center;
  border: var(--tab-border);
  border-bottom: none;
  cursor:pointer;
}
body.theme-dark .text-white {
    color: #ccd2d9!important;
}
h4 {
    color: var(--h4-text);
}
body.theme-dark h1 {
    color: #ccd2da;
}
body.theme-dark .bg-light>td {
    background: #4f5858!important;
}
body.theme-dark .hljs {
    background: #0f0f0f82!important;
    color: #8d8787!important;
}
.bg-info {
    background-color: var(--info)!important;
}
.bg-success {
    background-color: var(--success)!important;
}
.alert-success {
    background-color: var(--success)!important;
}
.alert-warning {
    background-color: var(--warning)!important;
}
.alert-info {
    background-color: var(--info)!important;
}
.bg-warning {
    background-color: var(--warning)!important;
}
.badge-warning {
    color: var(--badge-text)!important;
    background-color: var(--warning)!important;
}
.table-warning>td {
    background-color: var(--warning-row);
}
.alert-danger {
    background-color: var(--failure)!important;
}
body.theme-dark .alert-dark {
    background-color: #636467!important;
}
body.theme-dark .text-dark {
    color: #d1dae4!important;
}
.badge-light {
    color: #212529;
    background-color: var(--badge-bg);
}
.bg-danger {
    background-color: var(--failure)!important;
}
.table-danger>td {
    background-color: var(--failure-row);
}
body.theme-dark .table .thead-light th {
    background-color: #4f5858!important;
    border-color: #dee2e6!important;
    color: #ccd2d8!important;
}
.itPassed {
  background: var(--success);
  color: white;
}
.itFailed {
  background: var(--failure);
  color: white;
}
.resultsInfoPass {
  color: var(--success);
  padding-top: 4px;
}
.resultsInfoFail {
  color: var(--failure);
  padding-top: 4px;
}
.badge-outline-success {
  color: var(--success);
  border: 1px solid var(--success);
  background-color: transparent;
}
.badge-outline {
  color: var(--badge-outline);
  border: 1px solid var(--badge-outline);
  background-color: transparent;
}
.btn-outline-success {
    color: var(--success)!important;
    border-color: var(--success)!important;
}
.backToTop:hover {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--hov-text)!important;
}
.btn-outline-success:hover {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--hov-text)!important;
}
.btn-outline-secondary {
  background-color: var(--success)!important;
  color: var(--hov-text)!important;
}
body, html {
  height:100%;
}
.card {
  overflow:hidden;
}
.card-body .rotate {
  z-index: 8;
  float: right;
  height: 100%;
}
.card-body .rotate i {
  color: rgba(20, 20, 20, 0.15);
  position: absolute;
  left: 0;
  left: auto;
  right: -10px;
  bottom: 0;
  display: block;
  -webkit-transform: rotate(-44deg);
  -moz-transform: rotate(-44deg);
  -o-transform: rotate(-44deg);
  -ms-transform: rotate(-44deg);
  transform: rotate(-44deg);
}
.dyn-height {
  max-height:350px;
  overflow-y:auto;
}
.nav-pills .nav-link.active {
  background-color: transparent!important;
}
.backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  outline: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}
.single-line-tabs {
  padding-top: 10px;
  height: 60px;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 20px;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white;
  background-repeat: no-repeat;
  background-position: center;
}
input:checked + .slider {
  background-color: #4083b6;
}
input:focus + .slider {
  box-shadow: 0 0 1px #4083b6;
}
input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: white;
  background-repeat: no-repeat;
  background-position: center;
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>
  <div class="container">
        <div class="container">
            <label>Light</label>
            <label id="switch" class="switch">
                <input type="checkbox" onchange="toggleTheme()" id="slider">
                <span class="slider round"></span>
            </label>
            <label>Dark</label>
        </div>
        {{#with summary}}
        <div class="card">
        <div class="card-header">
            <ul class="nav nav-pills mb-3 nav-justified" id="pills-tab" role="tablist">
            <li class="nav-item bg-info active" data-toggle="tooltip" title="Click to view the Summary">
                <a class="nav-link text-white" id="pills-summary-tab" data-toggle="pill" href="#pills-summary" role="tab" aria-controls="pills-summary" aria-selected="true">Summary</a>
            </li>
            <li class="nav-item bg-success" data-toggle="tooltip" title="Click to view the Requests">
                <a class="nav-link text-white" id="pills-requests-tab" data-toggle="pill" href="#pills-requests" role="tab" aria-controls="pills-requests" aria-selected="false">Total Requests <span class="badge badge-light">{{stats.requests.total}}</span></a>
            </li>
            <li class="nav-item bg-danger" data-toggle="tooltip" title="Click to view the Failed Tests">
                <a class="nav-link text-white" id="pills-failed-tab" data-toggle="pill" href="#pills-failed" role="tab" aria-controls="pills-failed" aria-selected="false">Failed Tests <span class="badge badge-light">{{failures.length}}</span></a>
            </li>
            <li class="nav-item bg-warning" data-toggle="tooltip" title="Click to view the Skipped Tests">
                <a class="nav-link text-white" id="pills-skipped-tab" data-toggle="pill" href="#pills-skipped" role="tab" aria-controls="pills-skipped" aria-selected="false">Skipped Tests <span class="badge badge-light">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</span></a>
            </li>
            </ul>
        {{/with}}
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-summary" role="tabcard" aria-labelledby="pills-summary-tab"> 
<div class="row">
  <div class="col-md-9 col-lg-12 main">
   <h1 class="display-{{titleSize}} text-center">{{title}}</h1>
{{#with summary}}
   <h4 class="text-center">{{moment date format="dddd, DD MMMM YYYY HH:mm:ss"}}</h4>
   <div class="row">
    <div class="col-lg-3 col-md-6">
     <div class="card text-white card-success">
      <div class="card-body {{#gt failures.length 0}}bg-danger{{else}}bg-success{{/gt}}">
       <div class="rotate">
        <i class="fa fa-retweet fa-5x"></i>
       </div>
       <h6 class="text-uppercase">Total Iterations</h6>
       <h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{stats.iterations.total}}</h1>
      </div>
     </div>
    </div>
    <div class="col-lg-3 col-md-6">
     <div class="card text-white card-danger">
      <div class="card-body bg-success">
       <div class="rotate">
        <i class="fa fa-list fa-4x"></i>
       </div>
       <h6 class="text-uppercase">Total Assertions</h6>
       <h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{totalTests stats.assertions.total skippedTests.length}}</h1>
      </div>
     </div>
    </div>
    <div class="col-lg-3 col-md-6">
     <div class="card text-white card-info">
      <div class="card-body {{#gt failures.length 0}}bg-danger{{else}}bg-success{{/gt}}">
       <div class="rotate">
        <i class="fa fa-plus-circle fa-5x"></i>
       </div>
       <h6 class="text-uppercase">Total Failed Tests</h6>
       <h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{failures.length}}</h1>
      </div>
     </div>
    </div>
    <div class="col-lg-3 col-md-6">
     <div class="card text-white card-warning">
      <div class="card-body {{#gt skippedTests.length 0}}bg-warning{{else}}bg-success{{/gt}}">
       <div class="rotate">
        <i class="fa fa-share fa-5x"></i>
       </div>
       <h6 class="text-uppercase">Total Skipped Tests</h6>
       <h1 class="display-{{#gt stats.assertions.total 999 }}4{{else}}1{{/gt}}">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</h1>
      </div>
     </div>
    </div>
   </div>
   <hr>
    <div class="row">
    <div class="col">
        <div class="row">
        <div class="col-sm-12 mb-3">
            <div class="card border-info">
                <div class="card-body">
                <h5 class="card-title text-uppercase text-white text-center bg-info">File Information</h5>
                <span><i class="fas fa-file-code"></i></span><strong> Collection:</strong> {{collection.name}}<br>
                {{#if environment.name}}<span><i class="fas fa-file-code"></i></span><strong> Environment:</strong> {{environment.name}}<br>{{/if}}
                </div>
            </div>
        </div>
        </div>
        {{#if collection.description}}
        <div class="row">
        <div class="col-sm-12 mb-3">
            <div class="card border-info">
                <div class="card-body">          
                <h5 class="card-title text-uppercase text-white text-center bg-info">Collection Description</h5>
                <div class="dyn-height">
                    <pre id="description">{{collection.description}}</pre>
                </div>
                </div>
            </div>
        </div>
        </div>
        {{/if}}
        <div class="row">
        <div class="col-sm-12 mb-3">
            <div class="card border-info">
                <div class="card-body">
                <h5 class="card-title text-uppercase text-white text-center bg-info">Timings and Data</h5>
                <span><i class="fas fa-stopwatch"></i></span><strong> Total run duration:</strong> {{duration}}<br>
                <span><i class="fas fa-database"></i></span><strong> Total data received:</strong> {{responseTotal}}<br>
                <span><i class="fas fa-stopwatch"></i></span><strong> Average response time:</strong> {{responseAverage}}<br>
                </div>
            </div>
        </div>
        </div>
    {{/with}}
        <div class="row">
        <div class="col-sm-12 mb-3">
            <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead class="thead-inverse">
                    <tr class="text-center">
                        <th class="text-uppercase">Summary Item</th>
                        <th class="text-uppercase">Total</th>
                        <th class="text-uppercase">Failed</th>
                    </tr>
                </thead>
                <tbody>
                {{#with summary.stats}}
                    <tr>
                        <td>Requests</td>
                        <td class="text-center">{{requests.total}}</td>
                        <td class="text-center">{{requests.failed}}</td>
                    </tr>
                    <tr>
                        <td>Prerequest Scripts</td>
                        <td class="text-center">{{prerequestScripts.total}}</td>
                        <td class="text-center">{{prerequestScripts.failed}}</td>
                    </tr>
                    <tr>
                        <td>Test Scripts</td>
                        <td class="text-center">{{testScripts.total}}</td>
                        <td class="text-center">{{testScripts.failed}}</td>
                    </tr>
                    {{/with}}
                    {{#with summary}}
                    <tr class="{{#gt failures.length 0}}table-danger{{/gt}}">
                        <td>Assertions</td>
                        <td class="text-center">{{totalTests stats.assertions.total skippedTests.length}}</td>
                        <td class="text-center">{{stats.assertions.failed}}</td>
                    </tr>
                    <tr class="{{#gt skippedTests.length 0}}table-warning{{/gt}}">
                        <td>Skipped Tests</td>
                        <td class="text-center">{{#gt skippedTests.length 0}}{{skippedTests.length}}{{else}}0{{/gt}}</td>
                        <td class="text-center">-</td>
                    </tr>
                    {{/with}}
                </tbody>
            </table>
            </div>
        </div>
        </div>
    <hr>
   </div>
   </div>
  </div>
 </div>
        </div>
            <div class="tab-pane fade" id="pills-failed" role="tabcard" aria-labelledby="pills-failed-tab">
                <button id="topOfFailuresScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>
                {{#if summary.failures.length}}
                    {{#with summary}}
                    <div class="alert alert-danger text-uppercase text-center">
                        <h4>Showing {{failures.length}} {{#gt failures.length 1}}Failures{{else}}Failure{{/gt}}</h4>
                    </div>
                    {{/with}}
                    {{#each summary.failures}}
                    <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                        <div class="card border-danger">
                            <div class="card-header bg-danger">
                                <a data-toggle="collapse" href="#" data-target="#fails-collapse-{{cursor.ref}}" aria-expanded="false" aria-controls="collapse" id="fails-{{cursor.ref}}" class="collapsed text-white z-block">
                                    Iteration {{inc cursor.iteration}} - {{error.name}} - {{parent.name}} - {{source.name}} <i class="float-lg-right fa fa-chevron-down"></i>
                                </a>
                            </div>
                            <div id="fails-collapse-{{cursor.ref}}" class="collapse" aria-labelledby="fails-{{cursor.ref}}">
                            <div class="card-body">
                                <h5><strong>Failed Test:</strong> {{error.test}}</h5>
                            <hr>
                            <h5 class="card-title text-uppercase text-white text-center bg-danger">Assertion Error Message</h5>
                            <div>
                                <pre><code>{{error.message}}</code></pre>
                            </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    {{/each}}
                {{else}}
                <div class="alert alert-success text-uppercase text-center">
                     <br><br><h1 class="text-center">There are no failed tests <span><i class="far fa-thumbs-up"></i></span></h1><br><br>
                </div>
                {{/if}}
            </div>

            <div class="tab-pane fade" id="pills-skipped" role="tabcard" aria-labelledby="pills-skipped-tab">
                <button id="topOfSkippedScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>
                {{#if summary.skippedTests.length}}
                    {{#with summary}}
                    <div class="alert alert-warning text-uppercase text-center">
                        <h4>Showing {{skippedTests.length}} Skipped {{#gt skippedTests.length 1}}Tests{{else}}Test{{/gt}}</h4>
                    </div>
                    {{/with}}
                    {{#each summary.skippedTests}}
                    <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                        <div class="card border-warning">
                            <div class="card-header bg-warning text-white text-center text-uppercase">
                                <h5 class="card-title">{{assertion}}</h5>
                            </div>
                            <div class="card-body">
                                <h5><strong>Iteration:</strong> {{inc cursor.iteration}}</h5>
                                <h5><strong>Request Name:</strong> {{item.name}}</h5>
                            </div>
                        </div>
                    </div>
                    </div>
                    {{/each}}
                {{else}}
                <div class="alert alert-success text-uppercase text-center">
                    <br><br><h1 class="text-center">There are no skipped tests <span><i class="far fa-thumbs-up"></i></span></h1><br><br>
                </div>
                {{/if}}
            </div>
            <div class="tab-pane fade" id="pills-requests" role="tabcard" aria-labelledby="pills-requests-tab">
            
            <button id="topOfRequestsScreen" class="btn btn-outline-success btn-sm backToTop" onclick="topFunction()">Go To Top</button>

            <div class="btn-group float-right" role="group" aria-label="Button Group">
                <button id="openAllRequests" class="btn btn-outline-success btn-sm float-right">Expand Requests</button>
                <button id="closeAllRequests" class="btn btn-outline-success btn-sm float-right">Collapse Requests</button>
            </div>

    <div class="text-uppercase" id="execution-menu">
        {{#with summary}}
        <h5>{{stats.iterations.total}} {{#gt stats.iterations.total 1}}Iterations{{else}}Iteration{{/gt}} available to view</h5>
        {{#gt stats.iterations.total 18}}<input class="form-control w-25" style="margin-bottom: 5px;" id="filterInput" type="number" min="1" placeholder="Filter Iterations">{{/gt}}
        {{/with}}
        <ul class="nav {{#gt summary.stats.iterations.total 18}}nav-tabs{{else}}single-line-tabs{{/gt}}" id="iterationList">
        </ul>
    </div>
    <h6 class="text-uppercase text-muted" id="iterationSelected" style="padding-top: 10px;"></h6>
	<div class="tab-content" id="execution-data">
{{#each aggregations}}
        {{#if parent.name}}
        <div class="alert alert-dark text-uppercase text-center iteration-{{parent.iteration}}">
            {{parent.name}} - {{executions.length}} {{#gt executions.length 1}}Requests{{else}}Request{{/gt}} in the folder
        </div>
        {{> aggregations}}
        {{else}}
        {{> aggregations}}
        {{/if}}
{{/each}} 
        </div>      
    </div>
    </div>
    </div>
    </div>
    </div>
</body>
</html>

{{#*inline "aggregations"}}
{{#each executions}}
{{#gt cumulativeTests.failed 0}}
    <div class="card-deck iteration-{{cursor.iteration}}">
    <div class="row iteration-{{cursor.iteration}}">
        <div class="col-sm-12 mb-3 iteration-{{cursor.iteration}}">
        <div class="card iteration-{{cursor.iteration}}">
            <div class="card-header {{#if cumulativeTests.failed}} bg-danger{{else}} bg-success{{/if}} iteration-{{cursor.iteration}}">
                <a data-toggle="collapse" href="#" data-target="#collapse-{{cursor.ref}}" aria-expanded="false" aria-controls="collapse" id="requests-{{cursor.ref}}" class="collapsed text-white z-block">
            Iteration: {{inc cursor.iteration}} - {{item.name}} <i class="float-lg-right fa fa-chevron-down" style="padding-top: 5px;"></i>
        </a>
        {{#if cumulativeTests.skipped}}
        <span class="badge badge-warning text-white text-uppercase">{{cumulativeTests.skipped}} Skipped {{#gt cumulativeTests.skipped 1}}Tests{{else}}Test{{/gt}}</span>
        {{/if}}
            </div>
            <div id="collapse-{{cursor.ref}}" class="collapse" aria-labelledby="requests-{{cursor.ref}}">
            <div class="card-body">
                {{#with request}}
                {{#if description.content}}
                <div class="row">
                    <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                        <div class="card border-info" style="width: 50rem;">
                            <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Request Description</h5>
                                <div class="dyn-height">
                                    <code id="description">{{description.content}}</code>
                                </div>
                            </div>                    
                        </div>
                    </div>
                    </div>
                </div>
                {{/if}}
                {{/with}}  
                <div class="row">
                    <div class="col-sm-12 mb-3">
                        <div class="card-deck">
                        <div class="card border-info" style="width: 50rem;">
                            <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Request Information</h5>
                            <span><i class="fas fa-info-circle"></i></span><strong> Request Method:</strong> <span class="badge-outline-success badge badge-success"> {{request.method}}</span><br>
                            <span><i class="fas fa-info-circle"></i></span><strong> Request URL:</strong> <a href="{{request.url}}" target="_blank">{{request.url}}</a><br>
                            </div>
                        </div>
                        <div class="card border-info" style="width: 50rem;">
                            <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Response Information</h5>
                            <span><i class="fas fa-info-circle"></i></span><strong> Response Code:</strong> <span class="float-right badge-outline badge badge-success"> {{response.code}} - {{response.status}}</span><br>
                            <span><i class="fas fa-stopwatch"></i></span><strong> Mean time per request:</strong> <span class="float-right badge-outline badge badge-success"> {{mean.time}}</span><br>
                            <span><i class="fas fa-database"></i></span><strong> Mean size per request:</strong> <span class="float-right badge-outline badge badge-success"> {{mean.size}}</span><br>
                            <hr>
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Test Pass Percentage</h5>
                            <div>
                                {{#if assertions.length}}
                                <div class="progress" style="height: 40px;">
                                    <div class="progress-bar {{#if cumulativeTests.failed}} bg-danger{{else}} bg-success{{/if}}" style="width: 100%" role="progressbar">
                                    <h5><strong>{{#gte cumulativeTests.passed 1}}{{percent cumulativeTests.passed cumulativeTests.failed}} %{{else}}0 %{{/gte}}</strong></h5>
                                    </div>
                                </div>
                                {{else}}
                                <div class="progress" style="height: 40px;">
                                    <div class="progress-bar bg-success" style="width: 100%" role="progressbar">
                                    <h5 class="text-uppercase text-white text-center" style="padding-top:5px;"><strong>No Tests for this request</strong></h5>
                                    </div>
                                </div>
                                {{/if}}
                            </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                {{#with request}}
                {{#unless @root.omitHeaders}}
                {{#unless @root.skipSensitiveData}}
                <div class="row">
                    <div class="col-sm-12 mb-3">
                        <div class="card-deck">
                        <div class="card border-info" style="width: 50rem;">
                            <div class="card-body">
                                <h5 class="card-title text-uppercase text-white text-center bg-info">Request Headers</h5>
                                {{#if headers}}
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                    <thead class="thead-light text-center"><tr><th>Header Name</th><th>Header Value</th></tr></thead>
                                        <tbody>
                                            {{#each headers.members}}
                                            {{#isNotIn key @root.skipHeaders}}
                                            <tr>
                                                <td class="text-nowrap">{{key}}</td>
                                                <td>{{value}}</td>
                                            </tr>
                                            {{/isNotIn}}
                                            {{/each}}
                                        </tbody>
                                    </table>
                                </div>
                                {{/if}}
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                {{/unless}}
                {{/unless}}
                {{#unless @root.skipSensitiveData}}
                {{#if body.formdata.members}}
                    <div class="row">
                        <div class="col-sm-12 mb-3">
                            <div class="card-deck">
                                <div class="card border-info" style="width: 50rem;">
                                    <div class="card-body">
                                        <h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
                                        <div class="dyn-height">
                                            <pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{formdata body.formdata.members}}</code></pre>
                                        </div>
                                        <div class="card-footer">
                                            <button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{/if}}
                {{#if body.raw}}
                <div class="row">
                <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                    <div class="card border-info" style="width: 50rem;">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
                                <div class="dyn-height">
                                    <pre><code class="prettyPrint">{{body.raw}}</code></pre>
                                </div>
                                <div id="copyReqText-{{@key}}" class="card-footer">
                                    <button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
                                </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
                {{/if}}
                {{#if body.urlencoded.members}}
                    <div class="row">
                        <div class="col-sm-12 mb-3">
                            <div class="card-deck">
                                <div class="card border-info" style="width: 50rem;">
                                    <div class="card-body">
                                        <h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
                                        <div class="dyn-height">
                                            <pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{formdata body.urlencoded.members}}</code></pre>
                                        </div>
                                        <div class="card-footer">
                                            <button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{/if}}
                {{#if body.graphql}}
                <div class="row">
                <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                    <div class="card border-info" style="width: 50rem;">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Request Body</h5>
                                <div class="dyn-height">
                                    <pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{body.graphql.query}}</code></pre>
                                </div>
                                <div class="card-footer">
                                    <button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyReqText-{{@key}}">Copy to Clipboard</button>
                                </div>
                                {{#if body.graphql.variables }}
                                <h6 class="card-title text-uppercase text-white text-center bg-info">Graphql Variables</h6>
                                <div class="dyn-height">
                                    <pre><code id="copyReqText-{{@key}}" class="prettyPrint">{{body.graphql.variables}}</code></pre>
                                </div>
                                {{/if}}
                        </div>
                    </div>
                    </div>
                </div>
                </div>
                {{/if}}
                {{/unless}}
                {{/with}}
                {{#unless @root.omitHeaders}}
                {{#unless @root.skipSensitiveData}}
                <div class="row">
                <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                    <div class="card border-info" style="width: 50rem;">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Response Headers</h5>
                            {{#if response.header}}
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                <thead class="thead-light text-center"><tr><th>Header Name</th><th>Header Value</th></tr></thead>
                                    <tbody>
                                        {{#each response.header}}
                                        {{#isNotIn key @root.skipHeaders}}
                                        <tr>
                                            <td class="text-nowrap">{{key}}</td>
                                            <td>{{value}}</td>
                                        </tr>
                                        {{/isNotIn}}
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                            {{/if}}
                        </div>
                    </div>
                    </div>
                </div>
                </div>
                {{/unless}}
                {{/unless}}
                {{#unless @root.skipSensitiveData}}
                {{#isNotIn item.name @root.hideResponse}}
                <div class="row">
                <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                    <div class="card border-info" style="width: 50rem;">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Response Body</h5>
                            {{#if response.body}}
                                <div class="dyn-height">
                                        <pre><code id="copyText-{{item.id}}" class="prettyPrint">{{response.body}}</code></pre>
                                </div>
                                <div class="card-footer">
                                    <button class="btn btn-outline-secondary btn-sm copyButton" type="button" data-clipboard-action="copy" data-clipboard-target="#copyText-{{item.id}}">Copy to Clipboard</button>
                                </div>
                            {{else}}
                            <h5 class="alert alert-success text-uppercase text-center">No Response Body for this request</h5>
                            {{/if}}
                        </div>
                    </div>
                    </div>
                    </div>
                </div>
                {{/isNotIn}}
                {{/unless}}
                {{#if consoleLogs.length}}
                <div class="row">
                <div class="col-sm-12 mb-3">
                    <div class="card-deck">
                    <div class="card border-info" style="width: 50rem;">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase text-white text-center bg-info">Console Logs</h5>
                            <div class="dyn-height">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                <thead class="thead-light text-center"><tr><th>Log Messages</th></tr></thead>
                                    <tbody>
                                        {{#each consoleLogs}}
                                        <tr>
                                            <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;"><pre><code class="prettyPrint">{{#each messages}}{{this}}{{/each}}</code></pre></td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
                {{/if}}
                <div class="row">
                    <div class="card border-info">
                        <div class="card-body">
                        <h5 class="card-title text-uppercase text-white text-center bg-info">Test Information</h5>
                            {{#if assertions.length}}
                            <div class="table-responsive text-nowrap">
                                <table id="myTable-{{item.id}}" class="table table-hover">
                                <thead><tr class="text-center"><th>Name</th><th>Passed</th><th>Failed</th><th>Skipped</th></tr></thead>
                                    <tbody>
                                        {{#each assertions}}
                                        <tr>
                                            <td>{{this.name}}</td>
                                            <td class="text-center {{#if this.passed}}bg-success{{/if}}">{{this.passed}}</td>
                                            <td class="text-center {{#if this.failed}}bg-danger{{/if}}">{{this.failed}}</td>
                                            <td class="text-center {{#if this.skipped}}bg-warning{{/if}}">{{this.skipped}}</td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                    <tfoot>
                                        <tr class="bg-light">
                                            <td><strong>Total</strong></td>
                                            <td class="text-center">{{cumulativeTests.passed}}</td>
                                            <td class="text-center">{{cumulativeTests.failed}}</td>
                                            <td class="text-center">{{cumulativeTests.skipped}}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="row {{#lte cumulativeTests.failed 0}}d-none{{/lte}}">
                            <div class="col-sm-12 mb-3">
                                <div class="card-deck">
                                <div class="card border-danger" style="width: 50rem;">
                                    <div class="card-body">
                                        <h5 class="card-title text-uppercase text-white text-center bg-danger">Test {{#lte cumulativeTests.failed 1}}Failure{{else}}Failures{{/lte}}</h5>
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                            <thead><tr class="text-nowrap"><th>Test Name</th><th>Assertion Error</th></tr></thead>
                                                <tbody>
                                                    {{#each assertions}}
                                                    {{#isTheSame testFailure.test this.name}}
                                                    <tr>
                                                        <td class="w-45 text-nowrap">{{testFailure.test}}</td>
                                                        <td class="w-55"><pre><code>{{testFailure.message}}</code></pre></td>
                                                    </tr>
                                                    {{/isTheSame}}
                                                    {{/each}}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>          
                            {{else}}
                            <h5 class="alert alert-success text-uppercase text-center">No Tests for this request</h5>
                            {{/if}}                           
                        </div>
                    </div>
                </div>           
            </div>
            </div>
        </div>      
        </div>
    </div>
    </div>
{{/gt}}  
{{/each}}
{{/inline}}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
{{#eq noSyntaxHighlighting false}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{/eq}}

<script>
{{#each aggregations}}
{{#each executions}}
$(document).ready( function () {
    $('#myTable-{{item.id}}').DataTable({
        "retrieve": true,
        "paging": {{paging}},
        "info": false
    });
});
{{/each}}
{{/each}}
</script>

<script>
$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip({
        trigger : 'hover'
    })
})
</script>

<script>
$('#openAllRequests').on('click', function(e) {
{{#each aggregations}}
{{#each executions}}
    $('#requests-{{cursor.ref}}').removeClass('collapsed')
    $('#collapse-{{cursor.ref}}').removeClass('collapsed')
    $('#requests-{{cursor.ref}}').addClass('show')
    $('#collapse-{{cursor.ref}}').addClass('show')
{{/each}}
{{/each}}
})
</script>

<script>
$('#closeAllRequests').on('click', function(e) {
{{#each aggregations}}
{{#each executions}}
    $('#requests-{{cursor.ref}}').addClass('collapsed')
    $('#collapse-{{cursor.ref}}').addClass('collapsed')
    $('#requests-{{cursor.ref}}').removeClass('show')
    $('#collapse-{{cursor.ref}}').removeClass('show')
{{/each}}
{{/each}}
})
</script>

<script>
function isJSON(data)
{
    var ret = true;
    try {
            JSON.parse(data);
    }catch(e) {
            ret = false;
    }
    return ret;
}
function isXML(data)
{
    return (data.length > 0 && data[0] === '<');
}
// see https://gist.github.com/sente/1083506/d2834134cd070dbcc08bf42ee27dabb746a1c54d#gistcomment-2254622
function formatXML(data) {
    const PADDING = ' '.repeat(2); // set desired indent size here
    const reg = /(>)(<)(\/*)/g;
    let pad = 0;
    xml = data.replace(reg, '$1\r\n$2$3');
    return xml.split('\r\n').map((node, index) => {
        let indent = 0;
        if (node.match(/.+<\/\w[^>]*>$/)) {
            indent = 0;
        } else if (node.match(/^<\/\w/) && pad > 0) {
            pad -= 1;
        } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
            indent = 1;
        } else {
            indent = 0;
        }
        pad += indent;
        return PADDING.repeat(pad - indent) + node;
    }).join('\r\n');
}
$(".prettyPrint").each(function () {
        var data = $(this).text();
        // Verify whether data is JSON
        if(isJSON(data))
        {
                obj = JSON.parse(data);
                data = JSON.stringify(obj, null, 2);
        }
        else if(isXML(data)) {
            data = formatXML(data);            
        }
        $(this).text(data);
});
</script>


<!-- Copy Response Body To Clipboard -->
<script>
    var clipboard = new ClipboardJS('.copyButton');
    
    clipboard.on('success', function(e) {        
        e.clearSelection();
        $(".copyButton").addClass("bg-success text-white")
        e.trigger.textContent = '✔ Copied!';
        window.setTimeout(function() {
            $(".copyButton").removeClass("bg-success text-white")
            e.trigger.textContent = 'Copy to Clipboard';
        }, 2000);
    });
    clipboard.on('error', function(e) {
        e.clearSelection();
        $(".copyButton").addClass("bg-danger text-white")
        e.trigger.textContent = '✗ Not Copied';
        window.setTimeout(function() {
            $(".copyButton").removeClass("bg-danger text-white")
            e.trigger.textContent = 'Copy to Clipboard';
        }, 2000);
    });
</script>

<!-- Render the Description Markdown -->
<script>
    const remarkable = new Remarkable();
    
    const descriptions = document.querySelectorAll("#description");
    descriptions.forEach(description => {
        description.innerHTML = renderHtmlFromMarkdown(description.textContent);
    });
    function renderHtmlFromMarkdown(markdown) {
        return remarkable.render(trim(markdown));
    }
    function trim(string) {
        return string ? string.replace(/^ +| +$/gm, "") : string;
    }
</script>

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("topOfRequestsScreen").style.display = "block";
    document.getElementById("topOfFailuresScreen").style.display = "block";
    document.getElementById("topOfSkippedScreen").style.display = "block";
    document.getElementById("openAllRequests").style.display = "none";
    document.getElementById("closeAllRequests").style.display = "none";
  } else {
    document.getElementById("topOfRequestsScreen").style.display = "none";
    document.getElementById("topOfFailuresScreen").style.display = "none";
    document.getElementById("topOfSkippedScreen").style.display = "none";
    document.getElementById("openAllRequests").style.display = "block";
    document.getElementById("closeAllRequests").style.display = "block";
  }
}
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

<script type="text/javascript">
    "use strict";
window.onload = function () {
  // hides all blocks of response
  var allItems = document.querySelectorAll('[class*=iteration-]');
  allItems.forEach(function(elem){
    elem.style.display = 'none';
  });
  {{#with summary}} {{#with stats}}
  let totalIterations = {{iterations.total}};
  {{/with}} {{/with}}
  let menu = document.querySelector('#execution-menu .nav');
  for(var i = 0; i < totalIterations; i++)
  {
    let li = document.createElement('li');
    li.appendChild(document.createTextNode((i + 1)));
    li.setAttribute('id', 'iteration-' + i);
    li.classList.add("custom-tab");
    li.classList.add("itPassed");
    li.addEventListener('click', function() {
      let allItems = document.querySelectorAll('[class*=iteration-]');
      allItems.forEach(function(elem) {
        elem.style.display = 'none';
      })
      let allMenus = document.querySelectorAll('[id*=iteration-]');
      allMenus.forEach(function(elem){
        elem.style.borderBottom = 'none';
      })
      
      this.style.borderBottom = 'solid 3px #032a33';
      let items = document.querySelectorAll("." + this.id);
      items.forEach(function(elem) {
        elem.style.display = elem.style.display == 'block' ? 'none' : 'block';
      })
    });
    menu.appendChild(li);
  }
    //shows first tab data
  document.getElementById('iteration-0').click();
  document.getElementById('iterationSelected').innerHTML = `Iteration ${document.getElementById('iteration-0').innerHTML} selected`
  
  {{#each aggregations}}
  {{#each executions}}
  {{#if cumulativeTests.failed}}
    $("#iteration-{{cursor.iteration}}").removeClass('itPassed').addClass('itFailed')
  {{/if}}
  {{/each}}
  {{/each}}
}
</script>

<script>
$(document).ready(function(){
    $(function() {
        $("#iterationList li").click(function() {
            document.getElementById('iterationSelected').innerHTML = "Iteration " + this.innerHTML + " selected"
        });
    });
});
</script>


<script>
$(document).ready(function(){
  $("#filterInput").on("input paste", function() {
    var value = $(this).val();
    $("#iterationList li").filter(function() {
      $(this).toggle($(this).text().indexOf(value) > -1)
    });
  });
});
</script>

<script>
function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.body.className = themeName;
}
function toggleTheme() {
    if (localStorage.getItem('theme') === 'theme-light') {
        setTheme('theme-dark');
    } else {
        setTheme('theme-light');
    }
}
(function () {
    if (localStorage.getItem('theme') === 'theme-light') {
        setTheme('theme-light');
        document.getElementById('slider').checked = false;
    } else {
        setTheme('theme-dark');
        document.getElementById('slider').checked = true;
    }
})();
</script>